
<template>
  <main-container headerText="京东商品管理 >> 京东商品导入">
    <div class="content" :key="showPageKey">
      <top-option>
        <div slot="left-box">
          <input-search
            lableName="商品名称关键字"
            inputValue="keyword"
            :tThis="this"
            inputPlaceholder="请输入商品名称关键字"
          />

          <input-search
            lableName="最低价"
            inputValue="min"
            :tThis="this"
            inputPlaceholder="请输入最低价"
          />

          <input-search
            lableName="最高价"
            inputValue="max"
            :tThis="this"
            inputPlaceholder="请输入最高价"
          />

          <input-search
            lableName="第几页"
            inputValue="pageIndex"
            :tThis="this"
            inputPlaceholder="请输入第几页"
          />

          <input-search
            lableName="添加总条数"
            inputValue="pageSize"
            :tThis="this"
            inputPlaceholder="请输入每页条数"
          />

          <select-search
            lableName="一级分类"
            selectIdName="catCode"
            :tThis="this"
            selectPlaceholder="请选择一级分类"
            :selectOpts="catCodeOpts"
            selectWidth="150px;"
            labelWidth="80px;"
            @change="oneSortChangeF"
          />

          <select-search
            lableName="二级分类"
            selectIdName="superCode"
            :tThis="this"
            selectPlaceholder="请选择二级分类"
            :selectOpts="superCodeOpts"
            selectWidth="150px;"
            labelWidth="80px;"
            @change="twoSortChangeF"
          />

          <select-search
            lableName="三级分类"
            selectIdName="classCode"
            :tThis="this"
            selectPlaceholder="请选择三级分类"
            :selectOpts="classCodeOpts"
            selectWidth="150px;"
            labelWidth="80px;"
          />

          <select-search
            lableName="排序规则"
            selectIdName="sortField"
            :tThis="this"
            selectPlaceholder="请选择排序规则"
            :selectOpts="sortFieldOpts"
            selectWidth="150px;"
            labelWidth="80px;"
          />
        </div>
        <div slot="right-box">
          <div class="sub">
            <el-button @click="handleSearch" class="orange">查询</el-button>
          </div>
        </div>
      </top-option>

      <!-- 列表栏 -->
      <div class="list">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; border-radius: 4px"
          class="tableBox"
          border
        >
          <el-table-column label="序号" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.index || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="200">
            <template slot-scope="scope">
              {{ scope.row.name || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="一级分类编码" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.catCode || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="二级分类编码" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.superCode || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="三级分类编码" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.classCode || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="品牌" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.brandName || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="成本价" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.xfsPrice || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="京东价格" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.price || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="商品主图" width="undefined">
            <template slot-scope="scope">
              <div
                class="table-img-wrap"
                v-if="scope.row.imagePath"
                style="height: 60px"
              >
                <el-image
                  :src="scope.row.imagePath"
                  :preview-src-list="[scope.row.imagePath]"
                >
                </el-image>
              </div>
              <div v-else>未上传图片</div>
            </template>
          </el-table-column>
          <el-table-column label="库存" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.inventory || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="0">
            <template slot-scope="scope"> 
                <el-button
                @click="deleteF(scope.row.id)"
                type="danger"
                :data-id="scope.row.id"
                size="small"
                >删除</el-button
              >  
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="paging">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPageIdx"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="onePageSize"
            layout="total, prev, pager, next, jumper"
            :total="pageCount"
          ></el-pagination>
        </div>

        <div class="confirm-btn">
          <el-button class="paging-btn" @click="handleEnter" size="small"
            >确定</el-button
          >
        </div>
      </div>
    </div>
  </main-container>
</template>

  <script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import main_container from "@/components/main_container";
import top_option from "@/components/subCon/topOption";
import input_search from "@/components/subCon/inputSearch";
import select_search from "@/components/subCon/selectSearch";
import date_search from "@/components/subCon/dateSearch";

export default {
  components: {
    "main-container": main_container,
    "top-option": top_option,
    "input-search": input_search,
    "select-search": select_search,
    "date-search": date_search,
  },
  props: {},
  data() {
    return {
      //列表
      tableData: [],
      multipleSelection: [],
      //分页
      currentPageIdx: 1, //当前页与跳转框的初始值
      pageCount: 1, //总条数
      onePageSize: 10, //每页的条数

      showPageKey: 100,

      formData: {
        keyword: null,
        min: null,
        max: null,
        pageIndex: null,
        pageSize: null,
        catCode: null,
        superCode: null,
        classCode: null,
        sortField: null,
      },

      //商品分类内容
      catCodeOpts: [{ value: "", label: "请选择" }],
      superCodeOpts: [{ value: "", label: "请选择" }],
      classCodeOpts: [{ value: "", label: "请选择" }],

      sortFieldOpts: [
        { value: "price", label: "幸福树价格（成本价）" },
        { value: "jdPrice", label: "京东价格" },
        { value: "diffPrice", label: "价格差" },
        { value: "diffPriceRatio", label: "价格差比例" },
        { value: "", label: "请选择" },
      ],

      allMethods: "",
    };
  },
  mounted() {
    this.allMethods = this.getAllMethods();
    //页面数据重置 1
    if (this.recoverSearchF) {
      this.recoverSearchF({ _this: this });
    }

    this.initRequest();

    this.getInitData();

    //展示分类
    // this.tools.getGoodsSortOptsF({
    //   _this: this,
    // });
    
    this.getSort_1();

    console.log(this.formData)
  },
  watch: {
    "formData.catCode"() {
      this.getSort_2();
    },
    "formData.superCode"() {
      this.getSort_3();
    },
  },

  methods: {

    /* 一级分类change */
    oneSortChangeF() {
      this.formData.superCode = "";
      this.formData.classCode = "";
      // this.getSort_2();
    },

    /* 二级分类change */
    twoSortChangeF() {
      this.formData.classCode = "";
      // this.getSort_3();
    },

    //一级分类
    getSort_1() {
      this.tools.getSort_1({ _this: this });
    },
    //二级分类
    getSort_2() {
      this.tools.getSort_2({ _this: this });
    },
    //三级分类
    getSort_3() {
      this.tools.getSort_3({ _this: this });
    },

        //刷新
    refreshF() {
      this.showPageKey = this.tools.getRandomStr();
    },

    
    //删除
    deleteF(id) {
      var url =  this.api.jd_m.del;
      var data = { id };
      console.log("参数", data);
      this.$confirm("是否确认删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          jhTools.get(
            url,
            null,
            data,

            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.getInitData();
              } else {
                this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    // //三级分类，展示所有分类
    // getSort_3() {
    //   var _this = this;
    //   var url = _this.api.jd_sort_m.page;
    //   var data = {
    //     pageIndex: 1,
    //     pageSize: 10000,
    //     superCode: _this.formData.superCode,
    //     classType: "3",
    //   };

    //   _this.tools.post(
    //     url,
    //     data,
    //     null,
    //     (res) => {
    //       if (res.code == 200) {
    //         //清空
    //         _this.classCodeOpts = [{ value: "", label: "请选择" }];
    //         var opts = _this.classCodeOpts ? _this.classCodeOpts : [];
    //         var records = res.data.records || res.data || [];
    //         records.forEach((item, index) => {
    //           opts.push({
    //             label: item.className + "",
    //             value: item.classCode + "",
    //           });
    //         });
    //         if (_this.formData.superCode) {
    //           _this.classCodeOpts = opts;
    //         }
    //         _this.refreshF();
    //       } else {
    //         _this.$message({
    //           type: "warning",
    //           message: res.message,
    //         });
    //       }
    //     },
    //     (err) => {
    //       console.log(err);
    //     }
    //   );
    // },

    //查询
    handleSearch() {
      var {
        keyword,
        min,
        max,
        pageIndex,
        pageSize,
        catCode,
        superCode,
        classCode,
        sortField,
      } = this.formData;
      console.log(this.formData);

      //重置页码
      this.currentPageIdx = 1;
      //保存数据 2
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }

      //开启loading
      const load = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      this.tools.basePost({
        url: this.api.jd_m.jd_import,
        params: {
          keyword,
          min,
          max,
          pageIndex,
          pageSize,
          catCode,
          superCode,
          catId: classCode,
          sortField,
        },
        success: (res) => {
          //关闭loading
          load.close();
          this.tools.Model({
            msg: res.message,
          });
          this.getInitData();
        },
      });
    },

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {};
    },

    //表格默认函数
    //初始化
    initRequest() {
      this.LingChuang_request = jhTools.LingChuang_request({
        this: this,
        pageUrl: API.jd_m.page,
        searchUrl: API.jd_m.page,
        searchData: {},
      });
      // console.log(this.LingChuang_request);
    },
    //加载数据
    getInitData: function () {
      var _this = this;
      this.LingChuang_request.getInitData(
        {
          pageIndex: this.currentPageIdx,
          pageSize: this.onePageSize,
        },
        function (res) {
          //初始格式化数据
        }
      );
    },
    //格式化数据
    formatData() {
      this.LingChuang_request.formatData();
    },
    //格式化页面
    formatPaging(res) {
      this.LingChuang_request.formatPaging(res);
    },
    //页数跳转
    handleSizeChange(val) {
      this.LingChuang_request.handleSizeChange(val);
      //分页数据 5
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //页面点击跳转
    handleCurrentChange(val) {
      this.LingChuang_request.handleCurrentChange(val);
      //分页数据 5
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //enter跳转
    handleEnter() {
      this.LingChuang_request.getPagingData(
        this.currentPageIdx,
        this.onePageSize
      );
      //分页数据 5
      if (this.saveSearchF) {
        this.saveSearchF({ _this: this });
      }
    },
    //分页数据
    getPagingData(pageIndex, pageSize) {
      this.LingChuang_request.handleEnter(pageIndex, pageSize);
    },
    //列表勾选1
    toggleSelection(rows) {
      this.LingChuang_request.toggleSelection(rows);
    },
    //列表勾选2
    handleSelectionChange(val) {
      this.LingChuang_request.handleSelectionChange(val);
    },
    //表格默认函数

    /* 图片预览 */
    previewImgF({ imgUrl }) {
      this.tools.touchGEvent({
        eName: "previewImg",
        imgUrl,
      });
    },

    /* 恢复搜索状态 6 */
    recoverSearchF({ _this }) {
      _this.tools.recoverSearchF({
        _this,
        subItemName: "/jd_m_jd_m_table_import",
      });
    },

    /* 保存搜索状态 7 */
    saveSearchF({ _this }) {
      _this.tools.saveSearchF({
        _this,
        subItemName: "/jd_m_jd_m_table_import",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

//隐藏样式类
.hidden {
  display: none !important;
}
</style>
